<template>
    <div>
       
        	<van-nav-bar
        	  title="能不能吃"
        	  left-arrow  
        	  @click-left="onClickLeft"
			  class="dan-k"
            />
			
			<!-- 搜索栏 -->
			<van-search placeholder="输入食物名称搜索" v-model="value" />

            <!-- 分类 -->
			<div class="fl-k">
				<van-row>
				  <van-col span="8" v-for="(item,i) in list" :key="i">
					  <dl @click="tap(i)">
						  <dd><img :src="item.pimg" alt=""></dd>
						  <dt>{{item.name}}</dt>
					  </dl>
				  </van-col>
				 
				</van-row>
				<van-row>
				  <van-col span="8" v-for="(item,i) in list1" :key="i">
					  <dl @click="tap1(i)">
						  <dd><img :src="item.pimg" alt=""></dd>
						  <dt>{{item.name}}</dt>
					  </dl>
				  </van-col>
				 
				</van-row>
            </div>
    </div>
</template>

<script>
import Axios from 'axios';
export default {
    name:'Canyoueat',
	data(){
		return{
			'value':'',
			list:[
				{
					"pimg":'https://img.yzcdn.cn/vant/cat.jpeg',
					"name":'主食'
				},
				{
					"pimg":'https://img.yzcdn.cn/vant/cat.jpeg',
					"name":'肉蛋类'
				},
				{
					"pimg":'https://img.yzcdn.cn/vant/cat.jpeg',
					"name":'水果'
				}
				
			],
			list1:[
				{
					"pimg":'https://img.yzcdn.cn/vant/cat.jpeg',
					"name":'零食'
				},
				{
					"pimg":'https://img.yzcdn.cn/vant/cat.jpeg',
					"name":'豆类'
				},
				{
					"pimg":'https://img.yzcdn.cn/vant/cat.jpeg',
					"name":'菌类'
				}
			]
		}
	},
	methods:{
		onClickLeft() {
          this.$router.go(-1)
	},
		tap(index){
			if(index == 0){
				this.$router.push('/products?id=4')
			}else if(index == 1){
				this.$router.push('/products?id=5')
			}else if(index == 2){
				this.$router.push('/products?id=6')
			}
		},
		tap1(index){
			if(index == 0){
				this.$router.push('/products?id=7')
			}else if(index == 1){
				this.$router.push('/products?id=8')
			}else if(index == 2){
				this.$router.push('/products?id=9')
			}
		}	
  }
	
}
</script>

<style scoped>
	.dan-k{
		width:375px;
		height:42px;		
		background-color: #F9F9F9;		
	}
	.van-icon{
		color: #000000;
		font-weight: bold;
	}
	.van-nav-bar__title{						
		color: rgba(100, 100, 100, 1);
		font-size: 14px;
		text-align: center;		
		font-family: Arial;		
	}
	.van-search__content{		
		width: 315px;
		height: 34px;
		border-radius: 12px;
		background-color: rgba(219, 219, 219, 1);
		text-align: center;
	}
	.fl-k{
		width: 375px;
		height: 236px;
		line-height: 20px;
		background-color: rgba(251, 251, 251, 1);
		text-align: center;
	}
	.van-row{
		width: 375px;
		height: 117px;
		border-bottom: 1px solid #E1E1E1;
	}
	.van-row:nth-child(2){
		border-bottom: none;
	}
	.van-col{
		height: 118px;		
		border-right: 1px solid #E1E1E1;
	}
	.van-col:nth-child(3){
		border-right: none;
	}
	.van-col dl{
		width: 36px;
		height: 57px;		
		margin:0 auto;
		margin-top:28px;
	}
	.van-col dd{
		width: 30px;
		height: 30px;
		border-radius:50%;
		background: #ECECEC;
		margin:0 auto;
		overflow: hidden;

	}
	.van-col dd img{
		width: 30px;
		height: 30px;
	}
	.van-col dt{
		width: 36px;
		height: 17px;
		margin-top:10px;
		color: rgba(16, 16, 16, 1);
		font-size: 12px;
		text-align: center;
		font-family: PingFangSC-regular;
	}

</style>
